<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            margin: 60px;
        }

        table {
            border-collapse: collapse;
            border: 2px solid #cfeef1;
            margin-left: -25px;
        }

        .trr {
            color: #4d6b76;
            font-weight: bold;
            line-height: 50px;
            background-color: #cfeef1;
        }

        tr:nth-of-type(odd) {
            background-color: #efefef;
        }

        tr:nth-of-type(1) {
            background-color: #cfeef1;
        }

        td {
            padding-left: 80px;
            padding-right: 10px;
            line-height: 40px;
            text-align: center;
        }

        #box button {
            width: 35px;
            height: 20px;
            text-align: center;
            margin-right: 2px;
            border: none;
            border-radius: 3px;
            border: 1px solid #b8b8b8;
        }

        p {
            font-size: 18px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <table>
            <tr class="trr">
                <td></td>
                <td>商品名称</td>
                <td>商品单价</td>
                <td>商品数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in arr">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click=sub(item)>-</button>
                    <span> {{item.num}} </span>
                    <button @click=add(item)>+</button>
                </td>
                <td><button @click="fn(index)">移除</button></td>
            </tr>
        </table>
        <p>总价：¥ <span>{{getPrice()}}</span></p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            data: {
                arr: [
                    { name: "iPhone X", price: "7999", num: 1, istrue: false },
                    { name: "荣耀 10", price: "2399", num: 1, istrue: false },
                    { name: "华为 P20", price: "3399", num: 1, istrue: false },
                    { name: "小米 8", price: "3999", num: 1, istrue: false }
                ],
            },
            methods: {
                // 删除
                fn(index) {
                    // this.arr.splice(index, 1)
                    this.arr[index].istrue = true
                    let newarr = this.arr;
                    this.arr = [];
                    newarr.forEach(item => {
                        if (!item.istrue) {
                            this.arr.push(item)
                        }
                    })
                },
                // 加
                add(item) {
                    item.num++;
                },
                // 减
                sub(item) {
                    item.num--;
                    if (item.num <= 0) {
                        item.num = 1
                    }
                },
                // 计算总价
                getPrice() {
                    let toPrice = 0;
                    for (let index = 0; index < this.arr.length; index++) {
                        toPrice += Number(this.arr[index].num * this.arr[index].price)
                    }
                    return toPrice
                },
            }

        })
    </script>
</body>

</html>